<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学期:</span>
        <select class="select" v-model="semesterSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in semesterOption" :label="item.termName" :value="item.id"></option>
        </select>
        <el-button type="primary" size="small" @click="getTableData">确定</el-button>
        <el-button type="primary" size="small" @click="clearSem">重置</el-button>
        <!-- <div class="right">
          <el-select v-model="selectValue" filterable clearable placeholder="请输入教师姓名" size="small">
            <el-option
              v-for="item in teacherList"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="searchData">搜索</el-button>
        </div> -->
      	<div class="newadd">
      		<a :href="`${this._httpUrl}common/upload?fileName=${this.fileName}`">
      			<el-button type="primary" size="small">下载模板</el-button>
      		</a>
      		<el-button type="primary" size="small" @click="uploadshow">导入</el-button>
      		<el-button type="success" size="small" @click="newAddshow">新建</el-button>
      	</div>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.JIAOSHXINXIIGUANLI2X" class="pink">
    	<span class="title">周期配置</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="tableData" style="width: 100%" @cell-click="showDetails">
    			<el-table-column prop="id" label="#" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="state" label="状态" align="center"></el-table-column>
    			<el-table-column prop="weekNo" label="周数" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="startDate" label="开始时间" min-width="180" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="endDate" label="结束时间" min-width="180" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="createTime2" label="创建时间" min-width="180" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="updateTime2" label="修改时间" min-width="180" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column label="操作" min-width="110" align="center">
    				<template scope="scope">
    					<el-button type="text" size="small" @click="xiugaishow(scope)">修改</el-button>
              <el-button type="text" size="small">删除</el-button>
    				</template>
    			</el-table-column>
    		</el-table>
        <!-- <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination> -->
    	</template>
    </div>

    <div class="up" v-show="newAddShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增周数</span>
      <el-button icon="el-icon-close" class="close" @click="newAddshow()"></el-button>
      <div class="header">
        <span class="header-title">基本信息</span>
      </div>
      <div class="form">
      	<div class="row">
      		<span>周数:</span>
      		<input type="text" class="text" v-model="week">
      	</div>
      	<div class="row">
      		<span>开始时间:</span>
      		<!-- <input type="text" class="text" v-model="STime"> -->
      		<el-date-picker
  		      v-model="STime"
  		      format="yyyy-MM-dd"
            ref="stime"
  		      placeholder="选择日期">
  		    </el-date-picker>
      	</div>
      	<div class="row">
      		<span>结束时间:</span>
      		<!-- <input type="text" class="text" v-model="ETime"> -->
      		<el-date-picker
  		      v-model="ETime"
  		      format="yyyy-MM-dd"
  		      ref="etime"
  		      placeholder="选择日期">
  		    </el-date-picker>
      	</div>
      </div>
      <div class="bottom">
        <div class="left">
          <el-checkbox v-model="checked">继续新建</el-checkbox>
        </div>
        <div class="right">
          <el-button type="success" @click="keepData" size="small">确定</el-button>
          <el-button @click="newAddshow()" size="small">取消</el-button>
        </div>
      </div>
    </div>

    <div class="up" v-show="xiugaiShow">
      <img :src="IMGBASE64.XIANGQING2X" class="img">
      <span class="title">修改</span>
      <el-button icon="el-icon-close" class="close" @click="closeXiugaishow()"></el-button>
      <div class="header">
        <span class="header-title">基本信息</span>
      </div>
      <div class="form">
      	<div class="row">
      		<span>周数:</span>
      		<input type="text" class="text" v-model="changeForm.weekNo">
      	</div>
      	<div class="row">
      		<span>开始时间:</span>
      		<!-- <input type="text" class="text" v-model="STime"> -->
      		<el-date-picker
  		      v-model="changeForm.startDate"
  		      format="yyyy-MM-dd"
            ref="stime"
  		      placeholder="选择日期">
  		    </el-date-picker>
      	</div>
      	<div class="row">
      		<span>结束时间:</span>
      		<!-- <input type="text" class="text" v-model="ETime"> -->
      		<el-date-picker
  		      v-model="changeForm.endDate"
  		      format="yyyy-MM-dd"
  		      ref="etime"
  		      placeholder="选择日期">
  		    </el-date-picker>
      	</div>
      	<div class="row">
      		<span>状态:</span>
      		<el-radio-group v-model="changeForm.isValid" size="small">
  		      <el-radio-button label="启用"></el-radio-button>
  		      <el-radio-button label="禁用"></el-radio-button>
  		    </el-radio-group>
      	</div>
      </div>
      <div class="bottom">
        <div class="center">
          <el-button type="success" @click="changeData" size="small">确定</el-button>
        </div>
      </div>
    </div>

     <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="closeDetails()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="12">
            <el-form-item label="状态">
              <span>{{detailsForm.isValid}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="周数">
              <span>{{detailsForm.weekNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间">
              <span>{{detailsForm.startDate}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <span>{{detailsForm.endDate}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{detailsForm.createTime2}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间">
              <span>{{detailsForm.updateTime2}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="upload" v-show="upload">
      <el-button icon="el-icon-close" class="close" @click="uploadshow()"></el-button>
      <div class="uploadButton">
        <el-upload
          class="upload-demo"
          ref="upload"
          name="files"
          :action="`${this._httpUrl}comment/manage/week/import`"
          :headers= "this.xtoken"
          :data="this.importObj"
          :auto-upload="false"
          :on-success="resData"
          :on-change="getFileName">
          <el-button slot="trigger" type="primary" :disabled="selectFile" size="small">选取文件</el-button>
          <el-button style="margin-left: 10px;" type="success" @click="submitUpload" size="small">上传到服务器</el-button>
        </el-upload>
      </div>
      <div class="err" ref="err">
        <span class="error">{{errWord}}</span>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      fileName: '评价周期模板.xls',
      upload: false,
      time: null,
      errWord: null,
      newAddShow: false,
      isSuccess: false,
      week: null,
      STime: null,
      ETime: null,
      semesterSelect: null,
      semesterOption: [],
      tableData: [],
      total: 0,
      page: 1,
      paging: true,
      checked: false,
      xiugaiShow: false,
      isDetails: false,
      xtoken: null,
      selectFile: false,
      exportUrl: null,
      changeForm: {
        id: null,
        termId: null,
        weekNo: null,
        startDate: null,
        endDate: null,
        isValid: null
      },
      detailsForm: {},
      importObj: {
        files: null,
        termId: null
      }
    }
  },
  mounted () {
    this.getSemesterData()
    this.getTableData()
    this.exportUrl = this._exportUrl()
    this.xtoken = {'yxt-xtoken': this.exportUrl}
  },
  methods: {
    // _exportUrl () {
    //   let _cookie = document.cookie.split(';')
    //   let _cookieArray = []
    //   _cookie.forEach(v => {
    //     let _d = v.split('=')
    //     _cookieArray.push({
    //       key: _d[0],
    //       value: _d[1]
    //     })
    //   })
    //   return _cookieArray[0].value
    // },
    getFileName (file) {
      this.importObj.files = file.name
      this.importObj.termId = this.semesterSelect
      console.log(this.$refs.upload)
    },
    newAddshow () {
      this.newAddShow = !this.newAddShow
      this.isSuccess = !this.isSuccess
    },
    clearSem () {
      this.semesterSelect = null
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/week/list', {termId: this.semesterSelect}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = []
          this.tableData = response.data.data
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].createTime2 = this.changeTime(this.tableData[i].createTime)
            this.tableData[i].updateTime2 = this.changeTime(this.tableData[i].updateTime)
            if (this.tableData[i].isValid === 0) {
              this.tableData[i].state = '禁用'
            } else if (this.tableData[i].isValid === 1) {
              this.tableData[i].state = '启用'
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeTime (value) {
      if (value != null) {
        var date = new Date(value)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
      } else {
        return ''
      }
    },
    getSemesterData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.get(this._httpUrl + 'common/termList', {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.semesterOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    keepData () {
      this.STime = this.$refs.stime.displayValue
      this.ETime = this.$refs.etime.displayValue
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/week/add', {termId: this.semesterSelect, weekNo: this.week, startDate: this.STime, endDate: this.ETime}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.newAddShow = !this.newAddShow
          this.isSuccess = !this.isSuccess
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    xiugaishow (scope) {
      this.changeForm.id = scope.row.id
      this.changeForm.termId = scope.row.termId
      this.changeForm.weekNo = scope.row.weekNo
      this.changeForm.startDate = scope.row.startDate
      this.changeForm.endDate = scope.row.endDate
      this.changeForm.isValid = scope.row.isValid
      this.xiugaiShow = !this.xiugaiShow
      this.isSuccess = !this.isSuccess
    },
    closeXiugaishow () {
      this.xiugaiShow = !this.xiugaiShow
      this.isSuccess = !this.isSuccess
    },
    changeData () {
      this.changeForm.startDate = this.$refs.stime.displayValue
      this.changeForm.endDate = this.$refs.etime.displayValue
      if (this.changeForm.isValid === '启用') {
        this.changeForm.isValid = 1
      } else {
        this.changeForm.isValid = 0
      }
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/week/update', {id: this.changeForm.id, termId: this.changeForm.termId, weekNo: this.changeForm.weekNo, startDate: this.changeForm.startDate, endDate: this.changeForm.endDate, isValid: this.changeForm.isValid}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.xiugaiShow = !this.xiugaiShow
          this.isSuccess = !this.isSuccess
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    showDetails (row, column) {
      if (column.label !== '操作') {
        // let _cookie = document.cookie.split(';')
        // let _cookieArray = []
        // _cookie.forEach(v => {
        //   let _d = v.split('=')
        //   _cookieArray.push({
        //     key: _d[0],
        //     value: _d[1]
        //   })
        // })
        this.$http.post(this._httpUrl + 'comment/manage/week/queryById', {id: row.id}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.body.code === '000') {
            this.detailsForm = response.data.data
            if (this.detailsForm.isValid === 1) {
              this.detailsForm.isValid = '启用'
            } else {
              this.detailsForm.isValid = '禁用'
            }
            this.detailsForm.createTime2 = this.changeTime(this.detailsForm.createTime)
            this.detailsForm.updateTime2 = this.changeTime(this.detailsForm.updateTime)
            this.isDetails = !this.isDetails
            this.isSuccess = !this.isSuccess
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        })
      }
    },
    closeDetails () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    uploadshow () {
      this.upload = !this.upload
      this.isSuccess = !this.isSuccess
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.$refs.upload.uploadFiles = []
        this.selectFile = false
        this.errWord = null
      }
    },
    submitUpload () {
      this.$refs.upload.submit()
      this.getTableData()
      // console.log(this.$refs.upload.uploadFiles[0].response)
    },
    resData (response, file, fileList) {
      // console.log(response)
      this.errWord = response.msg
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .kong1{
    padding: 30px;
  }
  .retrieval{
    .body{
      span{
      	margin-left: 5%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .longSelect{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        padding-left: 5px;
        padding-right: 18px;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        padding-left: 5px;
        padding-right: 18px;
      }
      .right{
        width: 30%;
        display: inline-block;
        margin-left: 4%;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
      .newadd{
        float: right;
        margin-right: 10px;
      }
    }
  }
  
  .close{
    position: absolute;
    right: 2%;
  }
  .up{
    width: 35%;
    position: fixed;
    top: 130px;
    left: 50%;
    margin-left: -18%;
    background: #fff;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
    z-index: 99999;
    .form{
    	margin-left: 20%;
    	.row{
    		padding-top: 15px;
    	}
    	.text{
    		border: 0;
    		border-bottom: 1px solid #d7d7d7;
    	}
    }
    .img{
      position: absolute;
      top: -24px;
      left: 25px;
    }
    .green{
      width: 64px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #0DBF9B;
      border-radius: 4px;
      text-align: center;
      line-height: 80px;
    }
    .title{
      margin-left: 96px;
    }
    .header{
      height: 24px;
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      &-title{
        height: 24px;
        display: inline-block;
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .select{
      border: 0;
      border-bottom: 1px solid #D7D7D7;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      padding-left: 5px;
      padding-right: 18px;
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
      .center{
      	text-align: center;
      }
    }
  }
  .error{
    color: #FA5555;
  }

  .upload{
    width: 20%;
    position: fixed;
    left: 50%;
    top: 200px;
    margin-left: -10%;
    background: #FFF;
    border-radius: 5px;
    z-index: 99999;
    padding: 10px 10px 10px 10px;
    text-align: center;
    .uploadButton{
      margin-top: 40px;
    }
  }

  .details{
  width: 55%;
  position: fixed;
  left: 25%;
  top: 60px;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 20px 10px 10px 10px;
  }
</style>
